<template>
  <div>
    <f-button @click="rel += 1">add rel</f-button>
    <f-form-layout :columns="columns"> </f-form-layout>

    <f-cascader
      valueType="node"
      placeholder="请选择"
      v-model:value="selected"
      @change="handleChange"
      v-bind="options" />
    {{ selected }}
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const visible = ref(false);
const selected = ref('33');
const selected2 = ref(['2', '22']);
const handleChange = (value, option) => {
  console.log(value, option);
};

const treeNodes = reactive([
  {
    label: '选项1',
    value: '1',
    children: [
      { label: '选项12', value: '12' },
      { label: '选项13', value: '13' }
    ]
  },
  {
    label: '选项2',
    value: '2',
    children: [
      { label: '选项22', value: '22' },
      { label: '选项23', value: '23' }
    ]
  },
  {
    label: '选项3',
    value: '3',
    children: [
      { label: '选项32', value: '32' },
      { label: '选项33', value: '33' }
    ]
  }
]);
const rel = ref(1);
const options = reactive({
  query: () => {
    console.log('rel from ba');
    return Promise.resolve(treeNodes);
  }
});
const columns = reactive([
  { label: 'casacder', field: 'ba' },
  {
    label: 'casacder2',
    field: 'ba2',
    type: 'cascader',
    props: () => ({
      query: () => options.query()
    })
  }
]);
</script>
